<script lang="ts" setup>
import { useLocale } from '@/locale/locale';
import { usePopup } from '@/utils/popup';

defineProps(['requiredBook', 'startDate', 'cancelRate']);

defineEmits(['openCheckInGuide']);

const { popupRef } = usePopup();
const { t } = useLocale();
</script>

<template>
  <view class="mb-5 flex items-center">
    <image class="order-details__status-icon" src="/static/order_details_check_in.png" />
    <view class="flex-1 ml-2">
      <view class="order-details__status-title">
        {{ t('LOKey_orderCheckInSuccess') }}
      </view>
      <view class="order-details__status-tips">
        {{ t('LOKey_orderCheckInTimeBefore', { time: startDate?.slice(0, 10) }) }}
      </view>
    </view>
  </view>
  <view class="order-details__status-cell">
    <view class="flex items-center" @click="$emit('openCheckInGuide')">
      <view class="mr-2 text-base text-primary font-medium">
        {{ t('LOKey_orderCheckInRead') }}
      </view>
      <view class="flex-1 text-sm text-primary truncate">
        {{ requiredBook }}
      </view>
      <uni-icons color="#999" size="10" type="right" />
    </view>
  </view>

  <apt-cancellation-policy ref="popupRef" :cancel-rate="cancelRate" />
</template>

<style lang="scss">
.order-details__status-icon {
  height: 72rpx;
  width: 72rpx;
}

.order-details__status-title {
  color: #fff;
  font-size: 36rpx;
  line-height: 50rpx;
}

.order-details__status-tips {
  color: #fff;
  font-size: 24rpx;
  line-height: 34rpx;
}

.order-details__status-cell {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 32rpx 24rpx;
}
</style>
